function renderGeneralPublicSentiment () {
	var strokeWidth = 10;
	var width = 118;
	var relativeStrokeWidth = (strokeWidth / width * 100).toFixed(1);

	function getPerimeter () {
		var radius = 50 - parseFloat(relativeStrokeWidth) / 2;
		return 2 * Math.PI * radius;
	}

	function getTrackPath () {
		var radius = parseInt(50 - parseFloat(relativeStrokeWidth) / 2, 10);
		return 'M 50 50 m 0 -' + radius + ' a ' + radius + ' ' + radius + ' 0 1 1 0 ' + (radius * 2) + ' a ' + radius + ' ' + radius + ' 0 1 1 0 -' + (radius * 2);
	}

	function getCirclePathStyle (percentage) {
		percentage = percentage || 0
		if (percentage < 0) {
			percentage = 0;
		} else if (percentage > 100) {
			percentage = 100;
		}
		var perimeter = getPerimeter();
		return {
			strokeDasharray: perimeter + 'px, ' + perimeter + 'px',
			strokeDashoffset: (1 - percentage / 100) * perimeter + 'px',
			transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
		};
	}

	function renderCircle (tableName, percentage) {
		var $chart = $(tableName);
		var $track = $chart.find('.circle-chart-track');
		var $path = $chart.find('.circle-chart-path');
		var $p = $chart.parent('.circle-chart-box').find('p');

		$chart.parent('.circle-chart-box').css({
			width: width,
			height: width
		});
		$track.attr('d', getTrackPath());
		$track.attr('stroke-width', relativeStrokeWidth);
		$track.attr('stroke', 'rgba(255, 255, 255, .1)');

		$path.attr('d', getTrackPath());
		$path.attr('stroke-width', relativeStrokeWidth);
		$path.attr('stroke', '#00d6ff');
		$path.css(getCirclePathStyle(percentage));

		$p.html(percentage + '%');
	}

	renderCircle('#personalBadChart', 75);
	renderCircle('#mediaBadChart', 88.00);
}

function renderPersonalPublicSentiment () {
	var data = [
		{ date: '七月', notBad: 87053, bad: 3270 },
		{ date: '八月', notBad: 89157, bad: 2730 },
		{ date: '九月', notBad: 28161, bad: 847 }
	]
	var $chart = $('#personalPublicSentimentChart');
	var $bar = $chart.find('.bar-list');
	var str = '';
	var max = 0;
	data.forEach(function (item) {
		var value = item.notBad + item.bad;
		max = max <= value ? value : max;
	});
	var max_temp = Math.ceil(max);
	max_temp = max_temp.toString();
	var length = max_temp.length;
	var first = parseInt(max_temp[0]);
	if (first === '-') {
		max = 0;
	} else if (first > 0) {
		if (length === 1) {
			max = 10;
		} else {
			max = (first + 1) * Math.pow(10, length - 1);
		}
	}
	data.forEach(function (item) {
		var notBadRate = 0;
		var badRate = 0;
		notBadRate = parseFloat((item.notBad / max * 100).toFixed(2));
		badRate = parseFloat((item.bad / max * 100).toFixed(2));
		str += '<div class="bar-item">';
		str += '	<div class="bar-col-1">'+ item.date +'</div>';
		str += '	<div class="bar-col-2">';
		str += '		<div class="bar-bg">';
		str += '			<div class="bar bg-blue" style="width: '+ notBadRate +'%"></div>';
		str += '			<div class="bar bg-red" style="left: '+ notBadRate +'%; width: '+ badRate +'%;"></div>';
		str += '		</div>';
		str += '	</div>';
		str += '	<div class="bar-col-3">';
		str += '		<span class="color-blue">'+ item.notBad +'</span><span class="bar-split">/</span><span class="color-red">'+ item.bad +'</span>';
		str += '	</div>';
		str += '</div>';
	});
	$bar.empty().append(str);

}

function renderMediaPublicSentiment () {
	var data = [
		{ date: '七月', notBad: 5206, bad: 1688 },
		{ date: '八月', notBad: 6237, bad: 2408 },
		{ date: '九月', notBad: 2732, bad: 1440 }
	]
	var $chart = $('#mediaPublicSentimentChart');
	var $stack = $chart.find('.stack-list');
	var str = '';
	var max = 0;
	data.forEach(function (item) {
		var value = item.notBad + item.bad;
		max = max <= value ? value : max;
	});

	var max_temp = Math.ceil(max);
	max_temp = max_temp.toString();
	var length = max_temp.length;
	var first = parseInt(max_temp[0]);
	if (first === '-') {
		max = 0;
	} else if (first > 0) {
		if (length === 1) {
			max = 10;
		} else {
			max = (first + 1) * Math.pow(10, length - 1);
		}
	}

	data.forEach(function (item) {
		var rest = 10;
		var notBad = Math.round(item.notBad / max * 10);
		var bad = Math.round(item.bad / max * 10);
		rest = rest - notBad - bad ? rest - notBad - bad : 0;
		str += '<div class="stack-item">';
		// stack-value
		str += '	<p class="stack-value">';
		str += '		<span class="color-blue">'+ item.notBad +'</span>';
		str += '		<span class="stack-split">/</span>';
		str += '		<span class="color-red">'+ item.bad +'</span>';
		str += '	</p>';
		// stack
		str += '	<div class="stack">';
		for (var i = 0; i < rest; i++) {
			str += '<div class="stack-block"></div>';
		}
		for (var i = 0; i < bad; i++) {
			str += '<div class="stack-block bg-red"></div>';
		}
		for (var i = 0; i < notBad; i++) {
			str += '<div class="stack-block bg-blue"></div>';
		}
		str += '	</div>';
		str += '	<p class="stack-label">'+ item.date +'</p>';
		str += '</div>';
	});
	$stack.empty().append(str);
}

function renderKoubeiMark () {

}

function renderKoubeiScore () {
	function formatter (value) {
		var newStr = '';
		var start, end;
		var name_len = value.length;
		var max_name = 2;
		var new_row = Math.ceil(name_len / max_name);
		if (name_len > max_name) {
			for (var i = 0; i < new_row; i++) {
				var old = '';
				start = i * max_name;
				end = start + max_name;
				if (i === new_row - 1) {
					old = value.substring(start);
				} else {
					old = value.substring(start,end) + '\n';
				}
				newStr += old;
			}
		} else {
			newStr = value;
		}
		return newStr;
	}

	var commonOption = {
		tooltip: {},
		grid: {
			width: '80%',
		},
		radar: {
			name: {
				fontSize: 10,
				lineHeight: 15,
				formatter: formatter,
				color: 'rgba(255, 255, 255, 0.3)',
				rich: {
					align: 'center'
				}
			},
			splitArea: {
				show: false
			},
			indicator: [],
			radius: 50,
			splitLine: {
				lineStyle: {
					color: 'rgba(255, 255, 255, 0.2)'
				}
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(255, 255, 255, 0.2)'
				}
			}
		}
	}

	function chart01 () {
		var data = [
			{ series: '欧蓝德', param: '空调', score: 5 },
			{ series: '欧蓝德', param: '劲力', score: 4 },
			{ series: '欧蓝德', param: '操控', score: 3.2 },
			{ series: '欧蓝德', param: '油耗', score: 3.5 },
			{ series: '欧蓝德', param: '内饰', score: 4.1 },
			{ series: '欧蓝德', param: '外观', score: 2 },
			{ series: '欧蓝德', param: '性价比', score: 4.2 },
			{ series: '欧蓝德', param: '舒适度', score: 3 },
			{ series: '欧蓝德', param: '配置', score: 2.9 }
		];
		var title = '';
		var indicatorArr = [];
		var indicator = [];
		data.forEach(function (item) {
			title = item.series;
			indicatorArr.indexOf(item.param) < 0 && indicatorArr.push(item.param);
		});
		indicatorArr.forEach(function (item) {
			indicator.push({
				name: item,
				max: 5
			});
		});
		var seriesData = [];
		data.forEach(function (item) {
			seriesData.push(item.score);
		});
		var chart = echarts.init(document.getElementById('radar01'));
		var option = $.extend(true, {}, commonOption);
		option.radar.indicator = indicator;
		option.series = [{
			name: title,
			type: 'radar',
			itemStyle: {
				normal: {
					color: '#00d6ff'
				}
			},
			areaStyle: {
				normal: {
					opacity: 0.5
				}
			},
			lineStyle: {
				normal: {
			        width: 1,
			        opacity: 0.5
			    }
			},
			data: [{
				value : seriesData,
				name : title
			}]
		}];
		chart.setOption(option);
		$('#radar01').parent('.radar-item').find('.radar-label').html(title)
	}

	function chart02 () {
		var data = [
			{ series: '劲炫ASX', param: '空调', score: 3 },
			{ series: '劲炫ASX', param: '劲力', score: 3.2 },
			{ series: '劲炫ASX', param: '操控', score: 3.5 },
			{ series: '劲炫ASX', param: '油耗', score: 3.7 },
			{ series: '劲炫ASX', param: '内饰', score: 2.3 },
			{ series: '劲炫ASX', param: '外观', score: 4 },
			{ series: '劲炫ASX', param: '性价比', score: 4.2 },
			{ series: '劲炫ASX', param: '舒适度', score: 0 },
			{ series: '劲炫ASX', param: '配置', score: 2.9 }
		];
		var title = '';
		var indicatorArr = [];
		var indicator = [];
		data.forEach(function (item) {
			title = item.series;
			indicatorArr.indexOf(item.param) < 0 && indicatorArr.push(item.param);
		});
		indicatorArr.forEach(function (item) {
			indicator.push({
				name: item,
				max: 5
			});
		});
		var seriesData = [];
		data.forEach(function (item) {
			seriesData.push(item.score);
		});
		var chart = echarts.init(document.getElementById('radar02'));
		var option = $.extend(true, {}, commonOption);
		option.radar.indicator = indicator;
		option.series = [{
			name: title,
			type: 'radar',
			itemStyle: {
				normal: {
					color: '#00d6ff'
				}
			},
			areaStyle: {
				normal: {
					opacity: 0.5
				}
			},
			lineStyle: {
				normal: {
			        width: 1,
			        opacity: 0.5
			    }
			},
			data: [{
				value : seriesData,
				name : title
			}]
		}];
		chart.setOption(option);
		$('#radar02').parent('.radar-item').find('.radar-label').html(title);
	}

	function chart03 () {
		var data = [
			{ series: '派杰罗', param: '空调', score: 3 },
			{ series: '派杰罗', param: '劲力', score: 3.2 },
			{ series: '派杰罗', param: '操控', score: 4 },
			{ series: '派杰罗', param: '油耗', score: 5 },
			{ series: '派杰罗', param: '内饰', score: 4.2 },
			{ series: '派杰罗', param: '外观', score: 4 },
			{ series: '派杰罗', param: '性价比', score: 1.2 },
			{ series: '派杰罗', param: '舒适度', score: 3 },
			{ series: '派杰罗', param: '配置', score: 4.9 }
		];
		var title = '';
		var indicatorArr = [];
		var indicator = [];
		data.forEach(function (item) {
			title = item.series;
			indicatorArr.indexOf(item.param) < 0 && indicatorArr.push(item.param);
		});
		indicatorArr.forEach(function (item) {
			indicator.push({
				name: item,
				max: 5
			});
		});
		var seriesData = [];
		data.forEach(function (item) {
			seriesData.push(item.score);
		});
		var chart = echarts.init(document.getElementById('radar03'));
		var option = $.extend(true, {}, commonOption);
		option.radar.indicator = indicator;
		option.series = [{
			name: title,
			type: 'radar',
			itemStyle: {
				normal: {
					color: '#00d6ff'
				}
			},
			areaStyle: {
				normal: {
					opacity: 0.5
				}
			},
			lineStyle: {
				normal: {
			        width: 1,
			        opacity: 0.5
			    }
			},
			data: [{
				value : seriesData,
				name : title
			}]
		}];
		chart.setOption(option);
		$('#radar03').parent('.radar-item').find('.radar-label').html(title);
	}
	chart01();
	chart02();
	chart03();
}

function renderChinaChart() {
	function randomData() {  
		return Math.round(Math.random()*500);  
	}
	var mydata = [  
        {name: '北京',value: '100' },{name: '天津',value: randomData() },  
        {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
        {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
        {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
        {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
        {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
        {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
        {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
        {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
        {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
        {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
        {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
        {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
        {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
        {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
        {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
        {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  
    ];
	var optionMap = {  
		// backgroundColor: '#FFFFFF', 
		tooltip : {  
			trigger: 'item'  
		},  
		//左侧小导航图标
		visualMap: {  
			show : true,  
			x: 'left',  
			y: 'center',  
			splitList: [   
				{start: 500, end:600},{start: 400, end: 500},  
				{start: 300, end: 400},{start: 200, end: 300},  
				{start: 100, end: 200},{start: 0, end: 100},  
			],  
			color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
		},  

		//配置属性
		series: [{  
			name: '数据',  
			type: 'map',  
			mapType: 'china',   
			roam: true,  
			label: {  
				normal: {  
					// show: true  //省份名称  
				},  
				emphasis: {  
					show: false  
				}  
			},  
			data: mydata  //数据
		}]  
	};  
	//初始化echarts实例
	var myChart = echarts.init(document.getElementById('chinaChart'));

	//使用制定的配置项和数据显示图表
	myChart.setOption(optionMap);
}

function renderChinaChart2 () {
	function randomData() {  
		return Math.round(Math.random()*500);  
	}
	var data = [  
        {name: '北京',value: 100 },{name: '天津',value: randomData() },  
        {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
        {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
        {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
        {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
        {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
        {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
        {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
        {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
        {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
        {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
        {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
        {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
        {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
        {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
        {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
        {name: '香港',value: randomData() },{name: '澳门',value: randomData() },
        {name: '南海诸岛', value: 0} 
    ];

	var myChart = echarts.init(document.getElementById('chinaChart'));
	data.sort(function(o1, o2) {
	    if (isNaN(o1.value) || o1.value == null) return -1;
	    if (isNaN(o2.value) || o2.value == null) return 1;
	    return o1.value - o2.value;
	});
	var yData = [];
	var dataShadow = [];
	var yMax = 0;

	for (var i = 0, len = data.length; i < len; i++) {
		var item = data[i];
		if (yMax <= item.value) {
			yMax = item.value;
		}
		yData.push(item.name);
	}
	for (var i = 0, len = data.length; i < len; i++) {
		var item = data[i];
		dataShadow.push({
			name: item.name,
			value: yMax,
			show: false
		});
	}

	var option = {
		title: [
			{
				text: '',
				show: false,
			},
			{
				text: '认证车主分布TOP5省份',
				show: 'true',
				textStyle: {
					color: '#00d6ff',
					fontWeight: 'normal',
					fontSize: '20'
				},
				top: '75%',
				left: '30'
			}
		],
		tooltip: {
			show: true,
			formatter: function (params) {
				if (params.data) {
					if (params.data['show'] === false) {
						return '';
					}
					return params.name + ' : ' + params.data['value'];
				} else {
					return '';
				}
			}
		},
		grid: [{
			width: '30%',
			top: '80%',
	        bottom: '0%'
	    }, {
	        top: '0%'
	    }],
		xAxis: {
			type: 'value',
			scale: true,
			boundaryGap: false,
			position: 'bottom',
			splitLine: {
	            show: false
	        },
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	        	margin: 2,
	        	textStyle: {
	        		color: '#666666'
	        	}
	        }
		},
		yAxis: {
			type: 'category',
			nameGap: 16,
			axisLine: {
	            show: false,
	            lineStyle: {
	                color: '#ddd'
	            }
	        },
	        axisTick: {
	            show: false,
	            lineStyle: {
	                color: '#ddd'
	            }
	        },
	        axisLabel: {
	        	interval: 0,
	        	textStyle: {
	        		color: '#ffffff'
	        	}
	        },
	        data: yData.reverse().slice(0, 5).reverse()
		},
		visualMap: {
			type: 'continuous',
			text: ['高', '低'],
			showLabel: true,
			seriesIndex: [0],
			textStyle: {
				color: '#ffffff'
			},
			inRange: {
				color: ['#163643', '#182f3a', '#144554', '#0d7f98', '#00c0e5']
			},
			left: 'right',
			bottom: 0
		},
		geo: {
			roam: false,
			map: 'china',
			left: 'center',
			top: 0,
			layoutSize: '80%',
			label: {
				emphasis: {
					show: false
				}
			},
			itemStyle: {
				borderWidth: 1,
				opacity: 0.6,
				emphasis: {
					areaColor: '#00d6ff'
				}
			},
			regions: [{
	            name: '南海诸岛'
        	}]
		},
		series: [{
			name: 'mapSer',
			type: 'map',
			roam: false,
			geoIndex: 0,
			label: {
				show: false
			},
			data: data
		}, { // For shadow
            type: 'bar',
            itemStyle: {
                normal: { color: '#2c3239' }
            },
            barMaxWidth: 5,
            barGap:'-100%',
            barCategoryGap:'40%',
            data: dataShadow.reverse().slice(0, 5).reverse(),
            animation: false
        },{
			name: 'barSer',
			type: 'bar',
			roam: false,
			visualMap: false,
			zlevel: 2,
			barMaxWidth: 5,
			itemStyle: {
				normal: {
					color: '#00c0e5'
				},
				emphasis: {
					color: '#00d6ff'
				}
			},
			label: {
				normal: {
					color: '#ffffff',
					show: true,
					position: 'right',
					offset: [10, 0]
				},
				emphasis: {
					show: true,
					position: 'right',
					offset: [10, 0]
				}
			},
			data: data.reverse().slice(0, 5).reverse()
		}]
	}
	myChart.setOption(option);
}

$(function () {
	renderGeneralPublicSentiment();
	renderPersonalPublicSentiment();
	renderMediaPublicSentiment();
	renderKoubeiMark();
	renderKoubeiScore();
	// renderChinaChart();
	renderChinaChart2();
});